<template>
  <div>
    <el-dialog
      v-toggle-full
      class="base-dialog"
      :custom-class="'panna-dialog_big'"
      :title="title"
      :append-to-body="true"
      :visible.sync="innerDialogFormVisible"
      :before-close="handleClose"
    >
      <p slot="title">{{ title }}</p>

      <el-collapse v-model="activeNames">
        <el-collapse-item title="样品登记信息" name="1">
          <el-form
            ref="formDataSampleRegistration"
            class="base-pipeline-layout"
            :model="formDataSampleRegistration"
            status-icon
            label-width="110px"
          >
            <el-form-item label="报废日期" prop="scrapDate">
              <el-date-picker
                v-model="formDataSampleRegistration.scrapDate"
                disabled
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="送样人员" prop="sampleDeliveryPerson">
              <el-input
                v-model="formDataSampleRegistration.sampleDeliveryPerson"
                disabled
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="送样日期" prop="sampleDeliveryDate">
              <el-date-picker
                v-model="formDataSampleRegistration.sampleDeliveryDate"
                disabled
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="样品接收人员">
              <el-input
                v-model="formDataSampleRegistration.permissionUserName"
                disabled
                style="width: 100%"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="样品接收日期" prop="sampleReceivingDate">
              <el-date-picker
                v-model="formDataSampleRegistration.sampleReceivingDate"
                disabled
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="formDataSampleRegistration.remark"
                disabled
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-item>
        <el-collapse-item title="样品接收信息" name="2">
          <el-descriptions class="margin-top" :column="2" :size="size" border>
            <el-descriptions-item
              :label-style="{ width: '100px' }"
              :content-style="{ width: '40%' }"
            >
              <template slot="label"> 接收人 </template>
              <span v-if="sampleReceiving">{{
                sampleReceiving.receivingPerson
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item
              :label-style="{ width: '100px' }"
              :content-style="{ width: '40%' }"
            >
              <template slot="label"> 接收时间 </template>
              <span v-if="sampleReceiving">{{
                formatTime(sampleReceiving.receivingDate)
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 接收状态 </template>
              <span v-if="sampleReceiving">{{
                sampleReceiving.receivingStateName
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 存储位置 </template>
              <span v-if="sampleReceiving">{{
                sampleReceiving.storageLocation
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 分样时间 </template>

              <span v-if="sampleReceiving">{{
                formatTime(sampleReceiving.allotSampleTime)
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 样品数量 </template>
              <span v-if="sampleReceiving">{{
                sampleReceiving.sampleCount
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 气袋编号 </template>
              <span v-if="sampleReceiving">{{
                sampleReceiving.airPocketNum
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 接收备注 </template>
              <span v-if="sampleReceiving">{{
                sampleReceiving.receivingRemark
              }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="样品领取信息" name="3">
          <el-descriptions class="margin-top" :column="2" :size="size" border>
            <el-descriptions-item
              :label-style="{ width: '100px' }"
              :content-style="{ width: '40%' }"
            >
              <template slot="label"> 领取人 </template>
              <span v-if="sampleCollection">{{
                sampleCollection.collectionPerson
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item
              :label-style="{ width: '100px' }"
              :content-style="{ width: '40%' }"
            >
              <template slot="label"> 领取时间 </template>
              <span v-if="sampleCollection">{{
                formatTime(sampleCollection.sampleCollectionDate)
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 领取状态 </template>
              <span v-if="sampleCollection">{{
                sampleCollection.collectionStateName
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 领取数量 </template>
              <span v-if="sampleCollection">{{
                sampleCollection.sampleCollectionCount
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 领取备注 </template>
              <span v-if="sampleCollection">{{
                sampleCollection.collectionRemark
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> </template>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="样品留存信息" name="4">
          <el-descriptions class="margin-top" :column="2" :size="size" border>
            <el-descriptions-item
              :label-style="{ width: '100px' }"
              :content-style="{ width: '40%' }"
            >
              <template slot="label"> 接收人 </template>
              <span v-if="sampleStore">{{
                sampleStore.storeReceivingPerson
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item
              :label-style="{ width: '100px' }"
              :content-style="{ width: '40%' }"
            >
              <template slot="label"> 接收时间 </template>
              <span v-if="sampleStore">{{
                formatTime(sampleStore.receivingDate)
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 接收状态 </template>
              <span v-if="sampleStore">{{ sampleStore.storeStateName }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 存储位置 </template>
              <span v-if="sampleStore">{{ sampleStore.storageLocation }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 留存数量 </template>
              <span v-if="sampleStore">{{ sampleStore.sampleStoreCount }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 留存备注 </template>
              <span v-if="sampleStore">{{ sampleStore.storeRemark }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="留样报废信息" name="5">
          <el-descriptions class="margin-top" :column="2" :size="size" border>
            <el-descriptions-item
              :label-style="{ width: '100px' }"
              :content-style="{ width: '40%' }"
            >
              <template slot="label"> 处理人 </template>
              <span v-if="sampleScrap">{{ sampleScrap.disposePerson }}</span>
            </el-descriptions-item>
            <el-descriptions-item
              :label-style="{ width: '100px' }"
              :content-style="{ width: '40%' }"
            >
              <template slot="label"> 报废时间 </template>

              <span v-if="sampleScrap">
                {{ formatTime(sampleScrap.sampleScrapDate) }}</span
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 报废类型 </template>
              <span v-if="sampleScrap">{{
                sampleScrap.sampleScrapTypeCodeName
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 报废原因 </template>
              <span v-if="sampleScrap">{{ sampleScrap.scrapCause }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 报废备注 </template>
              <span v-if="sampleScrap">{{ sampleScrap.scrapRemark }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"></template>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
        <el-collapse-item title="留样领取信息" name="6">
          <el-descriptions class="margin-top" :column="2" :size="size" border>
            <el-descriptions-item
              :label-style="{ width: '100px' }"
              :content-style="{ width: '40%' }"
            >
              <template slot="label"> 领取人 </template>
              <span v-if="sampleReservedSampleReceive">{{
                sampleReservedSampleReceive.permissionUserName
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item
              :label-style="{ width: '100px' }"
              :content-style="{ width: '40%' }"
            >
              <template slot="label"> 领取时间 </template>
              <span v-if="sampleReservedSampleReceive">
                {{
                  formatTime(sampleReservedSampleReceive.sampleReceiveDate)
                }}</span
              >
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 领取状态 </template>
              <span v-if="sampleReservedSampleReceive">{{
                sampleReservedSampleReceive.receiveStateName
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 领取数量 </template>
              <span v-if="sampleReservedSampleReceive">{{
                sampleReservedSampleReceive.sampleReceiveCount
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"> 领取备注 </template>
              <span v-if="sampleReservedSampleReceive">{{
                sampleReservedSampleReceive.receiveRemark
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"></template>
            </el-descriptions-item>
          </el-descriptions>
        </el-collapse-item>
      </el-collapse>
    </el-dialog>
  </div>
</template>
<script>
import { SampleInfoGet } from "../../../api/SampleManage/SampleDetails";
import { formatTime } from "../../../utils/time";
export default {
  name: "SampleDetailsDialog",
  components: {},
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    editId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      title: "样品详情",
      formatTime,
      activeNames: ["1", "2", "3", "4", "5", "6"],
      formDataSampleRegistration: {
        scrapDate: "",
        sampleDeliveryPerson: "",
        sampleDeliveryDate: "",
        permissionUserName: "",
        sampleReceivingDate: "",
        remark: "",
      },
      sampleReceiving: {
        receivingPerson: "",
        receivingDate: "",
        receivingStateName: "",
        storageLocation: "",
        allotSampleTime: "",
        sampleCount: "",
        airPocketNum: "",
        receivingRemark: "",
      },
      sampleCollection: {
        collectionPerson: "",
        sampleCollectionDate: "",
        collectionStateName: "",
        sampleCollectionCount: "",
        collectionRemark: "",
      },
      sampleStore: {
        storeReceivingPerson: "",
        receivingDate: "",
        storeStateName: "",
        storageLocation: "",
        sampleStoreCount: "",
        storeRemark: "",
      },
      sampleScrap: {
        disposePerson: "",
        sampleScrapDate: "",
        sampleScrapTypeCodeName: "",
        scrapCause: "",
        scrapRemark: "",
      },
      sampleReservedSampleReceive: {
        permissionUserName: "",
        sampleReceiveDate: "",
        receiveStateName: "",
        sampleReceiveCount: "",
        receiveRemark: "",
      },
      size: "",
    };
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    this.init();
  },
  methods: {
    init() {
      SampleInfoGet({ id: this.editId }).then((res) => {
        this.formDataSampleRegistration = res.data.sampleRegistration;
        if (
          res.data.sampleRegistration !== undefined &&
          res.data.sampleRegistration !== null
        ) {
          this.formDataSampleRegistration.permissionUserName =
            res.data.sampleRegistrationReceivingPerson;
        }
        console.log(this.formDataSampleRegistration);
        this.sampleReceiving = res.data.sampleReceiving;
        if (
          res.data.sampleReceiving !== undefined &&
          res.data.sampleReceiving !== null
        ) {
          this.sampleReceiving.receivingPerson = res.data.receivingPerson;
          this.sampleReceiving.receivingStateName = res.data.receivingStateName;
        }
        this.sampleCollection = res.data.sampleCollection;
        if (
          res.data.sampleCollection !== undefined &&
          res.data.sampleCollection !== null
        ) {
          this.sampleCollection.collectionPerson = res.data.collectionPerson;
          this.sampleCollection.collectionStateName =
            res.data.collectionStateName;
        }
        this.sampleStore = res.data.sampleStore;
        if (
          res.data.sampleStore !== undefined &&
          res.data.sampleStore !== null
        ) {
          this.sampleStore.storeStateName = res.data.storeStateName;
          this.sampleStore.storeReceivingPerson = res.data.storeReceivingPerson;
        }
        this.sampleScrap = res.data.sampleScrap;
        if (
          res.data.sampleScrap !== undefined &&
          res.data.sampleScrap !== null
        ) {
          this.sampleScrap.sampleScrapTypeCodeName =
            res.data.sampleScrapTypeCodeName;
          this.sampleScrap.disposePerson = res.data.disposePerson;
        }
        this.sampleReservedSampleReceive = res.data.sampleReservedSampleReceive;
        if (
          res.data.sampleReservedSampleReceive !== undefined &&
          res.data.sampleReservedSampleReceive !== null
        ) {
          this.sampleReservedSampleReceive.receiveStateName =
            res.data.receiveStateName;
          this.sampleReservedSampleReceive.permissionUserName =
            res.data.permissionUserName;
        }
      });
    },
    // 关闭弹框
    handleClose() {
      this.closeDialog();
    },
    cancel() {
      this.innerDialogFormVisible = false;
      this.$emit("update:dialogFormVisible", false);
    },
    closeDialog() {
      this.$emit("close");
      this.cancel();
    },
  },
};
</script>
